<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<div id="wrapper">
    <div class="main clearfix">
        <div class="col_500">
            <div align="center">
                <h2>Coursing</h2>
                <table border="0" width="100%">
                    <form action="${baseUrl}/cp/savecourse.html" method="POST" >
                        <tr>
                            <td align="left" width="20%">Teacher :</td>
                            <td align="left" width="40%">
                                <select id="teacher" name="teacher">
                                    <c:forEach var="teacher" items="${dataTeachers.data}">
                                        <option value="${teacher.teacher_id}" >${teacher.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Course :</td>
                            <td align="left" width="40%">
                                <select id="course" name="course">
                                    <c:forEach var="course" items="${dataCourses.data}">
                                        <option value="${course.course_id}" >${course.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Session :</td>
                            <td align="left" width="40%">
                                <select id="session" name="session">
                                    <c:forEach var="session" items="${dataSessions.data}">
                                        <option value="${session.session_id}" >${session.year} : ${session.semester}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td align="left"><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Class :</td>
                            <td align="left" width="40%">
                                <select id="classes" name="class" multiple size="5" style="width: 100%;">
                                    <c:forEach var="classes" items="${dataClasses.data}">
                                        <option value="${classes.class_id}" >${classes.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td align="left"><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td colspan="2">
                                <input id="execute" type="button" value="Add" name="Execute" onclick="v_fExecuteCoursing()" />
                                <input type="button" onclick="formCancel('${baseUrl}/cp/coursing.html');" value="Cancel"/>
                            </td>
                        </tr>
                    </form>
                </table>
            </div>
        </div>
        <div class="clear"></div>
        <div class="col_900">        
            <table width="100%" cellspacing="0" cellpadding="0" border="0" class="total_res">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Teacher</th>
                        <th>Course</th>
                        <th>Class</th>
                        <th>Session Year</th>
                        <th>Session Semester</th>  
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <c:choose>
                        <c:when test="${dataCoursing.data != null}">
                            <% int i = 0;%>
                            <c:forEach var="coursings" items="${dataCoursingUnique}">
                                <tr id="${coursings.courseteacher_id}">
                                    <% i = i + 1;%>
                                    <td class="column1">
                                        <span><%=i%></span>
                                    </td>
                                    <td class="column2">
                                        <span>${coursings.teachers.name}</span>
                                        <input class="teacher" type="hidden" value="${coursings.teachers.teacher_id}" />
                                    </td>
                                    <td class="column3">
                                        <span>${coursings.courses.name}</span>
                                        <input class="course" type="hidden" value="${coursings.courses.course_id}" />
                                    </td>

                                    <td class="column4">
                                        <c:if test="${coursings.classes != null}"> 
                                            <ul>
                                                <c:forEach var="classes" items="${coursings.classes}">
                                                    <li>
                                                        <span>${classes.name}</span>
                                                    </li>
                                                </c:forEach>
                                            </ul>
                                            <select class="classes" hidden="hidden" disabled="disabled" multiple>
                                                <c:forEach var="classes" items="${coursings.classes}">
                                                    <option selected="selected" value="${classes.class_id}"></option>
                                                </c:forEach>
                                            </select>
                                        </c:if>
                                    </td>
                                    <td class="column5">
                                        <span>${coursings.sessions.year}</span>
                                        <input class="session" type="hidden" value="${coursings.sessions.session_id}" />
                                    </td>
                                    <td class="column6">
                                        <span>${coursings.sessions.semester}</span>
                                    </td>
                                    <td class="column7">
                                        <a href="#" onclick="v_fEditACoursing(${coursings.courseteacher_id});"><img src="<c:url value="${assetsUrl}/images/pencil.png"/>" title="Edit" alt="Edit" /></a>                               
                                    </td> 
                                    <td  class="column8">
                                        <a href="#" class="confirmationRemoving" onclick="v_fRemoveACoursing(${coursings.courseteacher_id});"><img src="<c:url value="${assetsUrl}/images/trash_can.png"/>" title="Remove" alt="Remove" /></a>                               
                                    </td>
                                </tr>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <tr>
                                <td colspan="6">There are no results</td>
                            </tr>
                        </c:otherwise>
                    </c:choose>
                </tbody>
            </table>
            <div class="col_730" style="margin-top: 15px;">
             <c:if test="${dataCoursing.pageCount >= 2}">
                <span class="paging">Page : </span>
                <ul class="paging">
                    <c:forEach var="i" begin="0" end="${dataCoursing.pageCount-1}">
                        <c:choose>
                            <c:when test="${pageIndex eq i}">
                                <li class="current"><c:out value="${i}"/></li>
                            </c:when>
                            <c:otherwise>
                                    <li><a class="active" href="${baseUrl}/cp/coursing.html?page=<c:out value="${i}"/>"><c:out value="${i}"/></a></li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </ul>
            </c:if>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function v_fEditACoursing(the_i_CoursingId)
    {
        v_fAutoLoadCoursing(the_i_CoursingId);
        $("input#execute").attr('onclick', 'v_fChangeACoursing(' + the_i_CoursingId + ')').val('Edit');
    }

    function v_fChangeACoursing(the_i_CoursingId)
    {
        /* Execute saving*/
        var sz_EdiUrl = "${baseUrl}/cpservice/coursingdetail.json";
        var i_CoursingId = the_i_CoursingId;
        var i_TeacherId = $("select#teacher").val();
        var i_CourseId = $("select#course").val();
        var i_SessionId = $("select#session").val();
        var a_ClassIds = $("select#classes").val();

        if (typeof a_ClassIds == "undefined" || a_ClassIds == null || a_ClassIds.length == 0)
        {
            alert("Please choose at least one class.");
            $("select#classes").focus();
            return false;
        } else {
            $.ajax({
                type: "POST",
                url: sz_EdiUrl,
                data: "id=" + i_CoursingId + "&teacherId=" + i_TeacherId + "&courseId=" + i_CourseId + "&sessionId=" + i_SessionId + "&classId=" + a_ClassIds,
                success: function(response) {
                    if (response.status) {
                        //$("table tr#"+the_i_CoursingId).html('');
                        alert(response.message);
                        window.location = "${baseUrl}/cp/coursing.html";
                    } else {
                        alert(response.message);
                    }
                },
                error: function(e) {
                    alert('Error: ' + e);
                }
            });
        }
    }

    function v_fRemoveACoursing(the_i_CoursingId)
    {
        //var sz_RemoveUrl = "${baseUrl}/cp/removeacoursing/"+the_i_CoursingId+".html";
        var sz_RemoveUrl = "${baseUrl}/cpservice/delcoursing.json";
        $.confirm({
            text: "This is a confirmation dialog manually triggered! Please confirm:",
            confirm: function() {
                $.ajax({
                    type: "POST",
                    url: sz_RemoveUrl,
                    data: "id=" + the_i_CoursingId,
                    success: function(response) {
                        alert(response.message);
                        if (response.status)
                            $("table tr#" + the_i_CoursingId).html('');
                    },
                    error: function(e) {
                        alert('Error: ' + e);
                    }
                });
            },
            cancel: function() {
                // Cancel removing
            }
        });
    }

    function v_fExecuteCoursing()
    {
        var sz_AddUrl = "${baseUrl}/cpservice/addacoursing.json";
        var i_TeacherId = $("select#teacher").val();
        var i_CourseId = $("select#course").val();
        var i_SessionId = $("select#session").val();
        var i_coursingId = $("input#coursing").val();
        var a_ClassIds = $("select#classes").val();

        if (typeof a_ClassIds == "undefined" || a_ClassIds == null || a_ClassIds.length == 0)
        {
            alert("Please choose at least one class.");
            $("select#classes").focus();
            return false;
        } else {
            $.ajax({
                type: "POST",
                url: sz_AddUrl,
                data: "id=" + i_coursingId + "&teacherId=" + i_TeacherId + "&courseId=" + i_CourseId + "&sessionId=" + i_SessionId + "&classId=" + a_ClassIds,
                success: function(response) {
                    if (response.status) {
                        alert(response.message);
                        window.location = "${baseUrl}/cp/coursing.html";
                    } else {
                        alert(response.message);
                    }
                },
                error: function(e) {
                    alert('Error: ' + e);
                }
            });
        }
    }

    function v_fAutoLoadCoursing(the_i_Id)
    {
        // reset selected class
        $("select#classes option").prop('selected', false);

        /* Show choosing row*/
        var i_TeacherId = $("tr#" + the_i_Id).find("input.teacher").val();
        var i_CourseId = $("tr#" + the_i_Id).find("input.course").val();
        var i_SessionId = $("tr#" + the_i_Id).find("input.session").val();
        var a_ClassesIds = $("tr#" + the_i_Id).find("select.classes").val();

        // reset tr class
        $("tr.selected").removeClass("selected");
        // highlight selected
        $("tr#" + the_i_Id).addClass("selected");

        $("select#teacher").val(i_TeacherId).change();
        $("select#course").val(i_CourseId).change();
        $("select#session").val(i_SessionId).change();
        $.each(a_ClassesIds, function(key, value) {
            $("select#classes option[value=" + value + "]").prop('selected', true);
        });

        $("select").animate({backgroundColor: "#FFFF66"}, 500).delay(400);
    }
</script>